<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="referrer" content="never">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<script src="js/remstyle.js"></script>
		<link rel="stylesheet" href="assets/mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/min_page.css" />
		<link rel="stylesheet" type="text/css" href="css/sameInfo.css" />
		<link rel="stylesheet" type="text/css" href="css/material_phone.css" />
		<link rel="stylesheet" type="text/css" href="css/material_QR_code.css" />
		<link rel="stylesheet" type="text/css" href="css/material_link.css" />
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="application/javascript " src="js/jquery-1.7.2.min.js "></script>
		<script src="layer/layer.js"></script>
		<link rel="stylesheet" type="text/css" href="layer/skin/layer.css" />
		<script src="js/config.js"></script>
	</head>
	<style>
		html,
		body {
			background: #fff !important;
		}
		
		.all_details {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		.top_bannar {
			width: 100%;
			height: auto;
			position: relative;
			background: #5c9fcc;
			min-height: 4rem;
		}
		
		.bannar_con {
			width: 100%;
			height: auto;
		}
		
		.person_img {
			width: 1.5rem;
			height: 1.5rem;
			/*border: 1px solid red;*/
			position: absolute;
			bottom: -0.6rem;
			left: 0;
			right: 0;
			margin: auto;
			border-radius: 50%;
		}
		
		.person_info {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 0.8rem;
		}
		
		.read_time {
			width: 100%;
			height: 1rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 5%;
			box-sizing: border-box;
		}
		
		.details_con {
			width: 90%;
			font-size: 0.28rem;
			margin: 0.2rem 0;
		}
		
		.details_con img {
			max-width: 100%;
		}
		
		.phone_list {
			width: 100% !important;
		}
		
		.details_bottom {
			width: 100%;
			height: 1.2rem;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			flex-direction: row;
			z-index: 99;
		}
		
		.details_bottom_collect {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 0.22rem;
			/*border: 1px solid red;*/
		}
		
		.details_bottom_collect img {
			width: auto;
			height: 0.52rem;
			margin-bottom: 0.1rem;
		}
		
		.details_bottom_left {
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: space-around;
			width: 40%;
			height: 1rem;
		}
		
		.details_bottom_right {
			width: 60%;
			height: 1.2rem;
			background: #42a1f4;
			color: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: 0.4rem;
		}
		
		.details_bottom_right img {
			width: auto;
			height: 0.56rem;
			margin-right: 0.19rem;
		}
		
		.myactive {}
		/*[v-cloak] {
			display: none;
		}*/
		
		.adv-all {
			position: relative;
			z-index: 1;
		}
		
		.advvv {
			height: 7.4rem;
			overflow: hidden;
			margin-bottom: 0.2rem;
			border-bottom: 1px solid #CCCCCC;
		}
		
		.adv-to {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 3.5rem;
			background-color: white;
		}
		
		.new_shop_con {
			position: relative;
		}
		
		.productId {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			color: rgba(0, 0, 0, 0);
		}
	</style>

	<body>
		<!--顶部-->
		<div class="top" style="margin-bottom: 0;">
			<div class="top-one" onclick="javascript :history.back(-1);">
				<span><img src="img_page/right.png"/></span>
			</div>
			<div class="point">
				<img src="img_page/3point.png" />
			</div>
		</div>
		<!--bannar图-->
		<div class="all_details" v-cloak>
			<div class="top_bannar">
				<img v-if="page.img_url!=null" class="bannar_con" :src="page.img_url" />
				<img class="person_img" :src="v_ad_info.userImg" />
			</div>
			<div class="person_info">
				<span>{{v_ad_info.userName}}</span>
				<span>{{v_ad_info.userTitle}}</span>
			</div>
			<div class="read_time">
				<span>{{page.create_time}}</span>
				<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;阅读量{{page.browse_num}}</span>
			</div>
			<!--页面内容-->
			<div class="details_con_all" style="margin-bottom: 1.5rem;display: flex;flex-direction: column;align-items: center;width:100%;">
				<div class="details_con" v-cloak v-for="v in page.contentList">
					<div v-html="v.content" style="word-break:break-all;" @click="productTo"></div>
				</div>
			</div>

			<div class="details_bottom">
				<div class="details_bottom_left">
					<div class="details_bottom_collect collect_list_edit_con" v-on:click="details_collect()" v-bind:class="{'myactive':isActive}">
						<img v-if="isActive==false" class="no_love" src="img_page/no_collect.png" />
						<img v-if="isActive==true" class="collect_love" src="img_page/collect_love.png" />
						<span v-if="isActive==false" class="no_collect">加入收藏</span>
						<span v-if="isActive==true" class="my_collect">取消收藏</span>
					</div>
					<div class="details_bottom_collect" v-on:click="my_page()">
						<img src="img_page/details_my_page.png" />
						<span>我的单页</span>
					</div>
				</div>
				<div class="details_bottom_right" v-on:click="page_edit(page.id)">
					<img src="img_page/page_pencil.png" />
					<span>编辑单页</span>
				</div>
			</div>
		</div>
		<div class="adv-all">
			<div class="advvv">
			</div>
			<div class="adv-to"></div>
		</div>
	</body>
	<script src="common/js/header.js"></script>
	<script>
		if(CD.geturl().dest) {
			$('.details_bottom').css({
				"display": "none"
			})
		};
		if(CD.geturl().articleTo) {
			$('.details_bottom').css({
				"display": "none"
			})
		}

		$(function() {

		});

		var all_details = new Vue({
			el: '.all_details',
			data: {
				page: [],
				isActive: false,
				v_ad_info: null
			},
			created: function() {
				this.getList();
			},
			methods: {

				productTo(e) {
					var that = this;
					var aaa = e.target.innerHTML;
					var bbb = e.target.getAttribute("data-url");
					console.log(bbb)
					if(bbb != null) {
						window.location.href = bbb;
					} else {
						window.location.href = "v-shop-product.html?id=" + aaa + "&business=" + c_user_id;
					}

				},

				getList: function() {
					console.log("11111");
					var that = this;
					$.ajax({
						type: "get",
						url: v_url + "/wechat/singlepage/getPageById",
						data: {
							id: v_param,
							c_user_id: c_user_id
						},
						async: false,
						success: function(res) {
							var list = res.data;
							that.page = list
							//console.log(that.page, 123)
							//console.log(that.page.title,898989898);
							var aaaaaa = $('title').html(that.page.title);
							//console.log(aaaaaa,858585)
							//console.log(list);
							var photo_time = list["create_time"];
							var dateee = new Date(photo_time).toJSON();
							var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
							date = date.split(" ")[0]
							list["create_time"] = date;

						}
					});
					$.ajax({
						type: "get",
						url: v_url + "/wechat/collection/getCollection",
						data: {
							page_id: v_param,
							c_user_id: c_user_id
						},
						async: false,
						success: function(res) {
							console.log(res.data)
							if(!res.data) {
								that.isActive = false
							} else {
								that.isActive = true
							}
						}
					});
					$.ajax({
						type: "get",
						url: v_url + "/wechat/adv/getUserInfo",
						data: {
							c_user_id: c_user_id
						},
						async: true,
						success: function(res) {
							console.log(res.data)
							var ad_info = res.data
							that.v_ad_info = ad_info;
						}
					});

				},

				details_collect: function() {
					console.log(all_details.isActive)
					isActive = !this.isActive
					console.log(isActive)
					this.isActive = isActive
					$.ajax({
						type: "get",
						url: v_url + "/wechat/collection/toCollection",
						data: {
							page_id: v_param,
							c_user_id: c_user_id
						},
						async: false,
						success: function(res) {
							if(res.code == 200) {
								//console.log("成功")
							}

						}
					});
				},
				page_edit: function(id) {
					//console.log(id)
					window.location.href = "min_page_add.html?url=" + id + '&c_user_id=' + c_user_id
				},
				my_page: function() {
					window.location.href = "min_page.html?c_user_id=" + c_user_id
				}

			}
		})
	</script>

</html>